import { ref } from 'vue'

/**
 * @method 缩放移动
 * @param containerRef 容器
 * @param cutBoxRef 裁剪框
 * @returns
 */
export function useBoxMove(containerRef, cutBoxRef) {
  const currentTop = ref(0) // 裁剪框top
  const currentLeft = ref(0) // 裁剪框left
  const cutBoxWdith = ref(0) // 裁剪框宽
  const cutBoxHeight = ref(0) // 裁剪框高

  // 拖拽事件
  const handleBoxMove = (e) => {
    e.preventDefault()
    const { top, right, left, bottom, width, height } = containerRef.value.getBoundingClientRect()
    const name = e.target.dataset.name || ''
    let lastClientX = e.clientX
    let lastClientY = e.clientY
    const calculateLocation = (moveHandler) => {
      document.onmousemove = (docEvent) => moveHandler(docEvent)
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
    switch (name) {
      // 对每个缩放点进行处理
      case 'topLeft': {
        calculateLocation((docEvent) => {
          const disX = lastClientX - docEvent.clientX
          const disY = lastClientY - docEvent.clientY
          const differenceW = width - (currentLeft.value + cutBoxWdith.value)
          const differenceH = height - (currentTop.value + cutBoxHeight.value)
          const totalW = cutBoxWdith.value + differenceW + disX
          const totalH = cutBoxHeight.value + differenceH + disY
          if (totalW > width) {
            currentLeft.value = 0
            cutBoxWdith.value = width - differenceW
            lastClientX = left //要加上，不然快速移入移出后鼠标与边角位置不重合--事件不是连续触发的
          } else if (totalH > height) {
            currentTop.value = 0
            cutBoxHeight.value = height - differenceH
            lastClientY = top
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            currentLeft.value = currentLeft.value - disX
            cutBoxHeight.value = cutBoxHeight.value + disY
            currentTop.value = currentTop.value - disY
            lastClientX = docEvent.clientX
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'bottomLeft': {
        calculateLocation((docEvent) => {
          const disX = lastClientX - docEvent.clientX
          const disY = docEvent.clientY - lastClientY
          const differenceW = width - (currentLeft.value + cutBoxWdith.value)
          const totalW = cutBoxWdith.value + differenceW + disX
          const totalH = currentTop.value + cutBoxHeight.value + disY
          if (totalW > width) {
            currentLeft.value = 0
            cutBoxWdith.value = width - differenceW
            lastClientX = left
          } else if (totalH > height) {
            const differenceH = totalH - height
            cutBoxHeight.value = cutBoxHeight.value + disY - differenceH
            lastClientY = bottom
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            currentLeft.value = currentLeft.value - disX
            cutBoxHeight.value = cutBoxHeight.value + disY
            lastClientX = docEvent.clientX
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'bottomRight': {
        calculateLocation((docEvent) => {
          const disX = docEvent.clientX - lastClientX
          const disY = docEvent.clientY - lastClientY
          const totalW = currentLeft.value + cutBoxWdith.value + disX
          const totalH = currentTop.value + cutBoxHeight.value + disY
          if (totalW > width) {
            const differenceW = totalW - width
            cutBoxWdith.value = cutBoxWdith.value + disX - differenceW
            lastClientX = right
          } else if (totalH > height) {
            const differenceH = totalH - height
            cutBoxHeight.value = cutBoxHeight.value + disY - differenceH
            lastClientY = bottom
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            cutBoxHeight.value = cutBoxHeight.value + disY
            lastClientX = docEvent.clientX
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'topRight': {
        calculateLocation((docEvent) => {
          const disX = docEvent.clientX - lastClientX
          const disY = lastClientY - docEvent.clientY
          const differenceH = height - (currentTop.value + cutBoxHeight.value)
          const totalW = currentLeft.value + cutBoxWdith.value + disX
          const totalH = cutBoxHeight.value + differenceH + disY
          if (totalW > width) {
            const differenceW = totalW - width
            cutBoxWdith.value = cutBoxWdith.value + disX - differenceW
            lastClientX = right
          } else if (totalH > height) {
            currentTop.value = 0
            cutBoxHeight.value = height - differenceH
            lastClientY = top
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            cutBoxHeight.value = cutBoxHeight.value + disY
            currentTop.value = currentTop.value - disY
            lastClientX = docEvent.clientX
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'topMiddle': {
        calculateLocation((docEvent) => {
          const disY = lastClientY - docEvent.clientY
          const differenceH = height - (currentTop.value + cutBoxHeight.value)
          const totalH = cutBoxHeight.value + differenceH + disY
          if (totalH > height) {
            currentTop.value = 0
            cutBoxHeight.value = height - differenceH
            lastClientY = top
          } else {
            cutBoxHeight.value = cutBoxHeight.value + disY
            currentTop.value = currentTop.value - disY
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'bottomMiddle': {
        calculateLocation((docEvent) => {
          const disY = docEvent.clientY - lastClientY
          const totalH = currentTop.value + cutBoxHeight.value + disY
          if (totalH > height) {
            const differenceH = totalH - height
            cutBoxHeight.value = cutBoxHeight.value + disY - differenceH
            lastClientY = bottom
          } else {
            cutBoxHeight.value = cutBoxHeight.value + disY
            lastClientY = docEvent.clientY
          }
        })
        break
      }
      case 'leftMiddle': {
        calculateLocation((docEvent) => {
          const disX = lastClientX - docEvent.clientX
          const differenceW = width - (currentLeft.value + cutBoxWdith.value)
          const totalW = cutBoxWdith.value + differenceW + disX
          if (totalW > width) {
            currentLeft.value = 0
            cutBoxWdith.value = width - differenceW
            lastClientX = left
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            currentLeft.value = currentLeft.value - disX
            lastClientX = docEvent.clientX
          }
        })
        break
      }
      case 'rightMiddle': {
        calculateLocation((docEvent) => {
          const disX = docEvent.clientX - lastClientX
          const totalW = currentLeft.value + cutBoxWdith.value + disX
          if (totalW > width) {
            const differenceW = totalW - width
            cutBoxWdith.value = cutBoxWdith.value + disX - differenceW
            lastClientX = right
          } else {
            cutBoxWdith.value = cutBoxWdith.value + disX
            lastClientX = docEvent.clientX
          }
        })
        break
      }
      // ...
      default: {
        const disx = e.pageX - cutBoxRef.value.offsetLeft
        const disy = e.pageY - cutBoxRef.value.offsetTop
        calculateLocation((docEvent) => {
          const left = docEvent.pageX - disx
          const top = docEvent.pageY - disy
          const totalW = left + cutBoxWdith.value
          const totalH = top + cutBoxHeight.value
          if (totalW > width) {
            currentLeft.value = width - cutBoxWdith.value
          } else if (totalH > height) {
            currentTop.value = height - cutBoxHeight.value
          } else {
            currentLeft.value = left > 0 ? left : 0
            currentTop.value = top > 0 ? top : 0
          }
        })
        break
      }
    }

  }

  return {
    currentTop,
    currentLeft,
    cutBoxWdith,
    cutBoxHeight,
    handleBoxMove
  }
}